/**
系统标题栏
 */


(function() {
    const {remote} = require('electron');
    const {getAppPath} = remote.app;
    const {animation_support} = require(getAppPath() + '/src/mainlib/window-animation');
    let add_vue_component = require(getAppPath() + '/src/renderlib/vue/add-vue-component');
    let datetime = new Date().getTime();
    let className = `system-title-${datetime}`;
    
    add_vue_component('system-title', {
        scss:`
<style type="text/scss">
    .${className} {
        background: #29a0f5;
        color:black;
        width:100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height:32px;
        box-sizing: border-box;
        transition: all .5s;
        
        &.inactived {
            background: #cbcbcb;
        }
    
        h1 {
            height:25px;
            padding:3px 5px 3px 10px;
            -webkit-app-region: drag;
            box-sizing: border-box;
            font-size: 13px;
            font-weight: bold;
            margin:0;
            flex:1;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        
        .system-btn {
            display:flex;
            align-items: center;
            justify-content: center;
            padding: 5px 15px;
            box-sizing: border-box;
            cursor: default;
            transition: all .4s;
            outline:none;
            border:none;
            background: transparent;
            height: 100%;;
            
            &:hover {
                background: rgba(255,255,255, 0.3);
            }
            
            &[disabled] {
                opacity:0.3;
                color: black;
                
                &:hover {
                    background: transparent !important;
                    color: inherit !important;
                }
                
            }
            
            &.close {
                font-size:25px;
                
                &:hover {
                    background: #bf0000;
                    color:white;
                }
            }
        }
        
        
    }
</style>
    `,
        template: `
            <div class="${className}" :class="rootClass">
                <h1><slot>{{wndTitle}}</slot></h1>
                <button class="system-btn" @click="minimize" title="最小化" v-if="!hideminbtn && !(disabledminbtn && disabledmaxbtn)" :disabled="disabledminbtn">
                    <i class="iconfont icon-zuixiaohua_huaban" />
                </button>
                <button class="system-btn" @click="toggleMaximize" :title="wndMaxized?'还原':'最大化'" v-if="!hidemaxbtn && !(disabledminbtn && disabledmaxbtn)" :disabled="disabledmaxbtn">
                    <i class="iconfont icon-huanyuan" v-if="wndMaxized" />
                    <i class="iconfont icon-zuidahua" v-else />
                </button>
                <button class="system-btn close" @click="close" title="关闭" v-if="!hideclosebtn" :disabled="disabledclosebtn">
                    <i class="iconfont icon-guanbi" />
                </button>
            </div>
   `,
        
        mounted() {
            remote.getCurrentWindow().on('minimize', () => {
                this.wndMaxized = false;
            });
    
            remote.getCurrentWindow().on('maximize', () => {
                this.wndMaxized = true;
            });
    
            remote.getCurrentWindow().on('unmaximize', () => {
                this.wndMaxized = false;
            });
    
            remote.getCurrentWindow().on('focus', () => {
                this.wndFocus = true;
            });
    
            remote.getCurrentWindow().on('blur', () => {
                this.wndFocus = false;
            });
    
            remote.getCurrentWindow().on('page-title-updated', (e, title) => {
                this.wndTitle = title;
            });
        },
        
        props: {
            hideminbtn: { default: false },
            hidemaxbtn: { default: false },
            hideclosebtn: { default: false },
            disabledclosebtn: { default: false },
        },
        
        data() {
            return {
                wndMaxized: remote.getCurrentWindow().isMaximized(),
                wndFocus: remote.getCurrentWindow().isFocused(),
                wndTitle: remote.getCurrentWindow().getTitle(),
    
                disabledminbtn: !remote.getCurrentWindow().isMinimizable(),
                disabledmaxbtn: !remote.getCurrentWindow().isMaximizable(),
            }
        },
        
        methods: {
            createEventObj() {
                return {
                    _preventDefault:false,
                    
                    preventDefault() {
                        this._preventDefault = true;
                    },
                    
                    isPreventingDefault() {
                        return this._preventDefault;
                    }
                }
            },
            
            close() {
                let e = this.createEventObj();
                this.$emit('beforeclose', e);
                
                if(e.isPreventingDefault()) {
                    return;
                }
    
                // remote.getCurrentWindow().close();
    
                this.$emit('close', e);
            },
    
            toggleMaximize() {
               if(remote.getCurrentWindow().isMaximized()) {
                   let e = this.createEventObj();
                   this.$emit('beforerestore', e);
    
                   if(e.isPreventingDefault()) {
                       return;
                   }
                   
                   remote.getCurrentWindow().restore();
    
                   this.$emit('restore', e);
               } else {
                   let e = this.createEventObj();
                   this.$emit('beforemaximize', e);
    
                   if(e.isPreventingDefault()) {
                       return;
                   }
                   
                   remote.getCurrentWindow().maximize();
    
                   this.$emit('maximize', e);
               }
            },
            
            minimize() {
                let e = this.createEventObj();
                this.$emit('beforeminimize', e);
    
                if(e.isPreventingDefault()) {
                    return;
                }
                
                remote.getCurrentWindow().minimize();
    
                this.$emit('minimize', e);
            }
        },
        
        computed: {
            rootClass() {
                return {
                    inactived: !this.wndFocus
                };
            },
            
            rootStyles() {
                return {
                };
            }
        }
    });
})();


